<template>
	<view class="room-bg">
		<view class="room-content">
			<view id="player-container" class="video-container"></view>
			<!-- 头部 start -->
			<room-header :userInfo="userInfo" :onlineUser="onlineUser" :anchorInfo="anchorInfo"
				:onlineUserNum="onlineUserNum" :likeNum="likeNum" @show-online-user="showOnlineUser">
			</room-header>
			<!-- 头部 end -->
			<!-- 聊天室 start -->
			<chatroom class="chatroom" :message="messageQueen"></chatroom>
			<!-- 聊天室 end -->
			<!-- 底部 -->
			<room-bottom class="room-bottom" @send-message="sendTextMessage" :isTimReady="isTimReady"
				@quitGroup="exitRoom" @like="like" @showGift="showGift" @showgoods="getGoods">
			</room-bottom>
			<!-- 底部 -->
			<!-- 礼物面板 start -->
			<view class="gifts" :animation="animation">
				<gifts :balance="userAccount.balance_money" :giftList="giftList" @recharge="showRecharge"
					@hideGift="hideGift" @sendGift="sendGift"></gifts>
			</view>
			<!-- 礼物面板 end -->
			<!-- 充值面板 start -->
			<view class="recharge" :animation="animation3">
				<recharge :balance="userAccount.balance_money" :ruleList="ruleList" @hideRecharge="hideRecharge">
				</recharge>
			</view>
			<!-- 充值面板 end -->
			<!-- 商品面板 start -->
			<view class="goodslist" :animation="animation2">
				<goods-list @hidegoods="hidegoods" :roomid="chatInfo.groupId" :goodsList="goodsList"></goods-list>
			</view>
			<!-- 商品面板 end -->
			<!-- 礼物以及动画 start -->
			<gift-animation v-if="hasGift" class="gift-animation" @hideGiftAni="hideGiftAni" :sendUser="sendGiftUser"
				:giftInfo="giftInfo"></gift-animation>
			<!-- 礼物以及动画 end -->
			<!-- 在线用户卡片 start -->
			<view v-if="isShowOnlineUser" :animation="animation4" class="online-user">
				<online-user @hide-online-user="hideOnlineUser" @getOnlineUser="getOnlineUser"
					:loadingType="onlineUserLoadingType" :onlineUser="onlineUser">
				</online-user>
			</view>
			<!-- 在线用户卡片 end -->
			<!-- 点赞start -->
			<like ref="like" class="like" @like="setLike"></like>
			<!-- 点赞 end -->
		</view>
	</view>
</template>

<script>
	import roomHeader from './components/header.vue'
	import roomBottom from './components/bottom.vue'
	import chatroom from './components/chatroom.vue'
	import gifts from './components/gifts.vue'
	import recharge from './components/recharge.vue'
	import coupon from './components/coupon.vue'
	import notice from './components/notice.vue'
	import goodsList from './components/goodslist.vue'
	import introduction from './components/introduction.vue'
	import userCard from './components/user-card.vue'
	import onlineUser from './components/online-user.vue'
	import giftAnimation from './components/gift-animation.vue'
	import noOwner from './components/noowner.vue'
	import like from './components/like.vue'
	import TWebLive from 'tweblive'
	import im from 'tim-js-sdk'
	import {
		mixinChat
	} from './mixins/chat.js';

	export default {
		mixins: [mixinChat],
		components: {
			roomHeader,
			roomBottom,
			chatroom,
			gifts,
			recharge,
			coupon,
			notice,
			goodsList,
			introduction,
			userCard,
			onlineUser,
			giftAnimation,
			noOwner,
			like
		},
		data() {
			return {
				anchorInfo: {},
				userInfo: {},
				userAccount: {},
				chatInfo: {},
				player: null,
				liveComponent: null,
				isAnchor: true,
				isTimReady: true,
				userRole: 'player',
				animation: null,
				animation2: null,
				animation3: null,
				animation4: null,
				isShowOnlineUser: false,
				goodsList: [],
				ruleList: [],
				roomStatus: '0',
				cdnPlayUrl: {
					flv: '',
					hls: ''
				},
				volumeValue: 70,
				showSetVolume: false,
				audioContent: '关闭麦克风',
				isMute: false,
				playContent: '暂停',
				isPlay: true,
			}
		},
		computed: {

		},
		watch: {},
		methods: {
			init() {
				this.cdnPlay();
				this.initChat();
				this.initPlayer();
			},
			cdnPlay() {
				let streamID = this.chatInfo.streamId
				this.cdnPlayUrl.flv = `https://${this.chatInfo.playDomain}/live/${streamID}.flv`
				this.cdnPlayUrl.hls = `https://${this.chatInfo.playDomain}/live/${streamID}.m3u8`
			},
			initPlayer() {
				this.player = TWebLive.createPlayer()
				this.player.setCustomConfig({
					autoplay: false,
					volume: 0,
					poster: {
						style: 'cover',
						src: this.config.baseUrl + this.chatInfo.room_bg
					},
					pausePosterEnabled: false,
					wording: {
						1: '您观看的直播已结束哦~ ',
						2: '您观看的直播已结束哦~ ',
						4: '您观看的直播已结束哦~ ',
						13: '您观看的直播已结束',
						2032: '请求视频失败，请检查网络',
						2048: '请求m3u8文件失败，可能是网络错误或者跨域问题'
					}
				})
				this.player.setRenderView({
					elementID: 'player-container'
				})
				this.startPlay()
				// 播放时
				this.player.on(TWebLive.EVENT.PLAYER_PLAYING, this.onPlayerPlaying)
				// 暂停
				this.player.on(TWebLive.EVENT.PLAYER_PAUSE, this.onPlayerPause)
				// 浏览器不允许自动播放
				this.player.on(TWebLive.EVENT.PLAYER_AUTOPLAY_NOT_ALLOWED, this.onPlayerAutoPlayNotAllowed)
				this.player.on(TWebLive.EVENT.PLAYER_ERROR, this.onPlayerError)
			},
			onPlayerPlaying(event) {
				console.log('demo player | onPlayerPlaying |', event)
			},
			onPlayerPause(event) {
				console.log('demo player | onPlayerPause |', event)
			},
			onPlayerAutoPlayNotAllowed(event) {
				this.$u.toast('不能自动播放');
				console.log('demo player | onPlayerAutoPlayNotAllowed |', event)
			},
			onPlayerError(event) {
				console.log(event.code)
				if (event.data.code == 1 || event.data.code == 2 || event.data.code == 4 || event.data.code == 13) {
					uni.navigateTo({
						url: '/pagesA/live/lists',
					});
				}
				console.log('demo player | onPlayerError |', event)
			},
			//播放
			startPlay() {
				let userID = this.chatInfo.userID
				let userSig = this.chatInfo.userSig
				let SDKAppID = this.chatInfo.SDKAppID
				let roomID = this.chatInfo.groupId
				let url =
					`https://flv=${encodeURIComponent(this.cdnPlayUrl.flv)}&hls=${encodeURIComponent(this.cdnPlayUrl.hls)}`

				//let url = `room://sdkappid=${SDKAppID}&roomid=${roomID}&userid=${userID}&usersig=${userSig}`;

				this.player.startPlay(url).then(() => {
					console.log('demo player | startPlay | ok')
					this.isPlay = true
					this.playContent = '暂停播放'
				}).catch((error) => {
					console.error('demo player | startPlay | failed', error)
				})
			},
			buy(data) {
				wx.showLoading()
				this.tls.buy(data).then(() => {
					wx.hideLoading()
					this.hidegoods()
				})
			},
			showgoods() {
				const ani = uni.createAnimation({
					duration: 200
				})
				ani.bottom(0).step()
				this.animation2 = ani.export()
			},
			hidegoods() {
				const ani = uni.createAnimation({
					duration: 200
				})
				ani.bottom('-60vh').step()
				this.animation2 = ani.export()
			},
			showGift() {
				if (this.giftList.length <= 0) {
					this.getGift();
					return false;
				}
				const ani = uni.createAnimation({
					duration: 200
				})
				ani.bottom(0).step()
				this.animation = ani.export()
			},
			hideGift() {
				const ani = uni.createAnimation({
					duration: 200
				})
				ani.bottom('-620rpx').step()
				this.animation = ani.export()
			},
			showRecharge() {

				if (this.ruleList.length <= 0) {
					this.$u.get('live/api.live/getRuleList', {
							'showLoading': false
						})
						.then(res => {
							this.ruleList = res.data.ruleList;
							this.showRecharge();
						})
					return false;
				}

				this.hideGift();
				const ani = uni.createAnimation({
					duration: 200
				})
				ani.bottom(0).step()
				this.animation3 = ani.export()
			},
			hideRecharge() {
				const ani = uni.createAnimation({
					duration: 200
				})
				ani.bottom('-540rpx').step();
				this.animation3 = ani.export();
				this.showGift();
			},
			showOnlineUser() {
				this.isShowOnlineUser = true
				setTimeout(() => {
					const ani = wx.createAnimation({
						duration: 200
					})

					ani.bottom(0).step()
					this.animation4 = ani.export()
				}, 0)
			},
			hideOnlineUser() {
				const duration = 200
				const ani = wx.createAnimation({
					duration
				})
				ani.bottom('-45vh').step()

				this.animation4 = ani.export()
				setTimeout(() => {
					this.isShowOnlineUser = false
				}, duration)
			},
			sendGift(gift_id, gift_num) {
				this.$u.post('live/api.live/sendGift', {
					gift_id: gift_id,
					gift_num: gift_num,
					roomid: this.chatInfo.groupId
				}).then(res => {
					this.sendGiftMsg(gift_id, gift_num);
					this.hideGift();
					this.getUserAccountInfo();
					this.getOnlineUser('refresh');
				})

			},
			setLike(gift_id, gift_num) {
				this.$u.post('live/api.live/setLike', {
					roomid: this.chatInfo.groupId,
					showLoading: false
				}).then(res => {
					this.likeNum = res.data.likeNum;
					this.sendLikeMsg();
				})

			},
			getInfo() {
				this.$u.get('live/api.live/getInfo?role=player').then(res => {
					if (res.data.code == 404) {
						uni.showModal({
							content: res.data.content,
							showCancel: false,
							confirmText: res.data.btnTxt,
							complete() {
								uni.redirectTo({
									url: res.data.url
								})
							}
						})

						return false;
					}
					this.chatInfo = res.data.chatInfo;
					this.userInfo = res.data.userInfo;
					this.anchorInfo = res.data.anchorInfo;
					this.userAccount = this.userInfo.account;
					this.init();
				})
			},
			getUserAccountInfo() {
				this.$u.get('live/api.live/getUserAccountInfo').then(res => {
					this.userAccount = res.data.account;
				})
			},
			getGoods() {
				this.$u.get('live/api.live/getGoodsList?roomid=' + this.chatInfo.groupId, {
						'showLoading': false
					})
					.then(res => {
						this.goodsList = res.data.goodsList;
						this.showgoods();
					})
			},

		},
		async onLoad(data) {
			try {
				this.app.isLogin(this); //强制登陆
				this.getInfo();
			} catch (e) {
				console.warn(e)
			}

		},
		onUnload() {
			this.message = []
		},
	}
</script>

<style lang="scss" scoped>
	.room-bg {
		height: 100vh;
		width: 100vw;
		overflow: hidden;
		position: relative;
	}

	.bg-img {
		height: 100vh;
		width: 100vw;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 0;
	}

	.room-content {
		height: 100vh;
		width: 100vw;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 2;
	}

	.video-container {
		height: 100vh;
		width: 100vw;
		position: absolute;
		top: 0;
		left: 0;
	}

	.room-bottom {
		position: absolute;
		bottom: 0;
		width: 100vw;
		height: 50px;
		padding: 0 20rpx;
		margin-bottom: constant(safe-area-inset-bottom);
		/* 兼容 iOS < 11.2 */
		margin-bottom: env(safe-area-inset-bottom);
		/* 兼容 iOS >= 11.2 */
	}

	.chatroom {
		width: 60vw;
		max-height: 30vh;
		position: absolute;
		bottom: 120rpx;
		z-index: 100;
		padding: 20rpx;
		overflow: hidden;
	}

	.gifts,
	.goodslist,
	.introduction,
	.online-user,
	.recharge,
	.user-card {
		position: absolute;
		width: 100vw;
		height: 45vh;
		bottom: -45vh;
		z-index: 800;
		left: 0;
	}

	.gifts {
		height: 620rpx;
		bottom: -620rpx;
	}

	.recharge {
		height: 540rpx;
		bottom: -540rpx;
	}

	.goodslist {
		height: 60vh;
		bottom: -60vh;
	}

	.user-card {
		background-color: unset;
	}

	.gift-animation {
		position: absolute;
		top: 30vh;
		left: 20rpx;
	}

	.coupon {
		margin-top: 400rpx;
	}

	.live-player {
		width: 100vh;
		height: 100vw;
		background-color: #fff;
	}

	.notice {
		position: absolute;
		left: 20rpx;
		bottom: 50vh;
		max-width: 60vw;
	}

	.like {
		position: absolute;
		right: 20rpx;
		bottom: 140rpx;
	}

	.btn-wraper {
		position: absolute;
		right: 20rpx;
		top: 200rpx;
	}

	//修改视频样式
	/deep/ .vcp-fullscreen-toggle {
		display: none;
	}

	/deep/ .vcp-playtoggle {
		background: url("../static/images/live/play_gray.svg") no-repeat center;
		background-size: 100% 100%;
		width: 36px;
		height: 36px;
	}

	/deep/ .vcp-panel-bg {
		opacity: 0;
	}

	/deep/ .vcp-player video {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	/deep/ .vcp-controls-panel {
		position: fixed;
		right: 0;
		top: 0;
		bottom: 0;
		left: 0;
		margin: auto;
		width: 40px;
		height: 40px;
	}

	/deep/ .vcp-player {
		width: 100%;
		height: 100%;
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: rgba(0, 0, 0, 0)
	}

	/deep/ .vcp-bigplay {
		display: none;
	}

	/deep/ .vcp-error-tips {
		color: #FFFFFF;
		margin-top: -8.25em;
	}
</style>
